<template>
  <div>
    <div ref="myChart" :style="{ height: `${height}px`, width: `100%` }"></div>
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, onUnmounted, watch } from 'vue';
import { ref } from 'vue';
import echarts, { ECharts } from 'echarts';
import { addListener, removeListener } from 'resize-detector';
import dark from '@/components/chart/dark';
import { debounce } from 'lodash-es';
import { getDataZoomVisibie, getDatazoomEnd } from '@/components/charts/util';
echarts.registerTheme('dark-pro', dark);
export default defineComponent({
  props: {
    height: {
      type: Number,
      default: 200,
    },
    option: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  setup(props, context) {
    const echartsOption = ref<any>({
      legend: {
        x: 'right',
        y: 'top',
        textStyle: {
          //图例文字的样式
          color: '#fff',
          fontSize: 13,
        },

        data: ['智能', '传统', '智能相同数据', '传统相同数据'],
      },
      grid: {
        y2: 80,
        x: 50,
        x2: 30,
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
        // formatter: function (params) {
        //   let value = props.option.newDara[params[0].dataIndex];
        //   return `<div>${value.parentName}-${value.name}</div><div>百分比:${value.percent}</div><div>${value.name}:${value.caseNum}</div>`;
        // },
      },
      xAxis: {
        type: 'category',
        data: [],
        axisLabel: {
          show: true,
          textStyle: {
            color: '#B9B8CE',
          },
          interval: 0,
          rotate: 30,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#484753',
          },
        },
      },

      dataZoom: [
        {
          type: 'slider',
          show: true, //显示滚动条
          zoomLock: true, //锁定滚动条缩放，（固定滚动条长度）
          xAxisIndex: [0],
          bottom: '0',
          borderColor: '#484753', //边框和背景颜色一致，（因为无法做到无边框，只能跟随页面背景）
          showDetail: false, //关闭：拖拽时候显示详细数值信息。
          handleSize: '92%', //矢量尺寸占比
        },
      ],
      yAxis: [
        {
          type: 'value',
          axisLabel: {
            show: true,
            textStyle: {
              color: '#B9B8CE',
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#484753', //Y轴颜色
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#484753', //Y轴颜色
            },
          },
        },
      ],
      series: [
        {
          name: '智能相同数据',
          type: 'bar',
          stack: '智能',
          itemStyle: {
            normal: {
              color: '#008000',
              label: {
                show: true, //开启显示

                textStyle: {
                  //数值样式
                  position: 'bottom',
                  color: '#fff',
                },
              },
            },
          },
          data: [110, 232, 201, 154, 190, 330, 410],
        },
        {
          name: '智能',
          type: 'bar',
          stack: '智能',
          itemStyle: {
            normal: {
              color: '#DFA82D',
              label: {
                show: true, //开启显示
                position: 'top',
                textStyle: {
                  //数值样式
                  color: '#fff',
                },
              },
            },
          },
          data: [150, 232, 201, 154, 190, 330, 410],
        },
        {
          name: '传统相同数据',
          type: 'bar',
          stack: '传统',

          itemStyle: {
            normal: {
              color: '#008000',
              label: {
                show: true, //开启显示
                textStyle: {
                  //数值样式
                  position: 'bottom',
                  color: '#fff',
                },
              },
            },
          },
          data: [110, 232, 201, 154, 190, 330, 410],
        },
        {
          name: '传统',
          type: 'bar',
          stack: '传统',
          itemStyle: {
            normal: {
              color: '#3398DB',
              label: {
                show: true, //开启显示
                position: 'top',
                textStyle: {
                  //数值样式
                  color: '#fff',
                },
              },
            },
          },
          data: [150, 232, 201, 154, 190, 330, 410],
        },
      ],
    });
    const myChart = ref<any>();
    let chart: ECharts | null = null;
    const resizeChart = () => {
      chart?.resize();
    };
    const resize = debounce(resizeChart, 300);
    const myCharts = ref<any>();
    const init = data => {
      chart = echarts.init(myChart.value!);
      //x轴数据
      let xData = ref<any>([]);
      let xqdwListData = ref<any>([]);
      //相同数量
      let identicalData = ref<any>([]);
      let aiXqdwListData = ref<any>([]);
      if (data.xqdwList) {
        data.xqdwList.forEach((item, index) => {
          //   xqdwListData.value.push(item.caseNum);
          xqdwListData.value.push(item.caseNum - data.sameXqdwStat[index].caseNum);
          xData.value.push(item.xqdwName);
        });
      }
      if (data.sameXqdwStat) {
        data.sameXqdwStat.forEach(item => {
          identicalData.value.push(item.caseNum);
        });
      }
      if (data.aiXqdwList) {
        data.aiXqdwList.forEach((item, index) => {
          aiXqdwListData.value.push(item.caseNum - data.sameXqdwStat[index].caseNum);
        });
      }
      echartsOption.value.series[0].data = identicalData.value;
      echartsOption.value.series[1].data = aiXqdwListData.value;
      echartsOption.value.series[2].data = identicalData.value;
      echartsOption.value.series[3].data = xqdwListData.value;
      echartsOption.value.xAxis.data = xData.value;
      echartsOption.value.dataZoom[0].show = getDataZoomVisibie(
        myChart.value,
        echartsOption.value.xAxis.data.length,
      );
      echartsOption.value.dataZoom[0].end = getDatazoomEnd(
        myChart.value,
        echartsOption.value.xAxis.data.length,
      );
      chart.setOption(echartsOption.value, true);
      addListener(myChart.value, resize);
      chart.on('click', function (params) {
        let value = props.option.aiXqdwList[params.dataIndex];
        context.emit('clickEchart', { xqdwCodes: value.xqdwCode });
      });
    };
    onMounted(() => {
      init(props.option);
    });
    watch(
      () => props.option,
      () => {
        // echartsOption.value.series = props.option.yData;
        // echartsOption.value.xAxis.data = props.option.xData;
        init(props.option);
      },
      {
        deep: true, // 深度监听的参数
      },
    );
    onUnmounted(() => {
      if (myChart.value) {
        removeListener(myChart.value, resize);
      }
      chart?.dispose();
      chart = null;
    });
    return {
      echartsOption,
      myChart,
      init,
      myCharts,
      resizeChart,
    };
  },
});
</script>
